<template>
    <el-container>
        <el-header>
            <div>{{ sysName }}</div>
            <div style="flex: 1"></div>
            <div>
                <span class="timer">{{ currentTime }}</span>
                <div class="sxwCls">{{ weekDay + "&emsp;" + sxw }}</div>
            </div>
            <div>
                <div class="rightHeader">
                    <img class="imgCls" src="../assets/image/home/user.png" />
                    <a class="username">{{ name }}</a>
                </div>
                <div class="uCls">{{ userName }}</div>
            </div>
            <img src="../assets/image/home/logout1.png" :alt="logOut" :title="logOut" @click="logout" />
        </el-header>
        <el-container class="mainCls">
            <el-aside>
                <el-menu router default-active="CustomEcharts" class="el-menu-vertical-demo" :collapse="isCollapse"
                    @open="handleOpen" @close="handleClose">
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <location />
                            </el-icon>
                            <span>基础示例</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="CustomEcharts">echarts示例</el-menu-item>
                            <el-menu-item index="CesiumVue3Demo">cesium示例</el-menu-item>
                        </el-menu-item-group>
                        <el-sub-menu index="1-4">
                            <template #title><span>其它</span></template>
                            <el-menu-item index="1-4-1">暂无</el-menu-item>
                        </el-sub-menu>
                    </el-sub-menu>
                    <el-menu-item index="about">
                        <el-icon><icon-menu /></el-icon>
                        <template #title>关于</template>
                    </el-menu-item>
                    <el-menu-item index="error">
                        <el-icon>
                            <setting />
                        </el-icon>
                        <template #title>404</template>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script setup lang='ts'>
 
import { sessionClear } from '@/utils/auth';
import dateUtil from '@/utils/dateUtil';
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
const sysName = ref(conf.sysName) 
const name = ref('') 
const userName = ref('') 
let currentTime = ref(new Date().toLocaleString()) 
let weekDay = ref('') 
let sxw = ref('') 
const logOut = ref('退出系统') 
const router = useRouter();
let timer = ref(null);
/**
 * 给小于10的数字前面加上0
 * 
 * @param {number} obj - 要处理的数字
 * @returns {string} 如果obj小于10，则返回"0" + obj；否则返回obj本身
 */
const appendZero = (obj: number) => {
    if (obj < 10) {
        return "0" + obj;
    } else {
        return obj.toString();
    }
}
const initTime = () => { 
    timer = setInterval(() => {
        let ho = appendZero(new Date().getHours());
        //修改数据date
        currentTime = dateUtil.formatDateYmdhms(new Date());
        sxw =
            parseInt(ho) > 12 ? "早上" : "下午";
    }, 1000);
    let wk = new Date().getDay();
    let weeks = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
    ];
    weekDay = weeks[wk];
}
const logout = () => { 
    sessionClear();
    router.replace('/') 
}

const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

onMounted(() => {
    console.log(`the component is now mounted.`)
    initTime();
})
 
onBeforeUnmount(() => {
    console.log(`the component is now beforeUnmount.`)
    clearInterval(timer);
})
</script>

<style scoped lang="scss">
 :deep(.el-header) {
    background: url("../assets/image/home/top_bg.png");
    background-size: cover;
    color: #fff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;

    img {
        cursor: pointer;
    }
}

 :deep(.el-aside) {
    width: 200px !important;
    color: #fff;
    text-align: left !important;
    background: url("../assets/image/home/left_bg.png");
    z-index: 1;
    .el-menu-item.is-active {
        background: #2e92d1 !important;
        text-align: center !important;
    }

    .el-submenu.is-active .el-submenu__title {
        background: #1b386d;
    }

    .el-submenu__title:hover {
        background-color: rgba(3, 19, 33, 0.3) !important;
    }

    .el-menu-item:hover {
        background-color: rgba(3, 19, 33, 0.3) !important;
    }

    .el-menu-item {
        font-size: 16px;
        text-align: center;
        font-weight: 500;
        box-shadow: 0px -1px 0px 0px #136fbf;
        color: whitesmoke;
    }

    .el-menu {
        background: rgba(255, 255, 255, 0) !important;
    }

    .el-submenu__title i {
        color: white !important;
    }

    .el-submenu__title {
        font-size: 18px;
        font-weight: 500;
        text-align: left;
        box-shadow: 0px -1px 0px 0px #136fbf;
        background: rgba(27, 56, 109, 0.61);
        color: #fff;
    }

    .el-icon-arrow-down:before {
        content: "\e791";
    }

    .el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
    }

    .el-menu-item-group__title {
        color: #fff !important;
    }
}

.el-main {
    /*background-color: #E9EEF3;*/
    color: #333;
    background: url("../assets/image/home/table_bg.png") round !important;
    background-size: cover !important;
    padding: 0;
}

.rightHeader {
    .imgCls {
        width: 14px;
        height: 15px;
        margin-right: 10px;
    }
}
.mainCls{
    height: calc(100% - 60px);
}
</style>